Skip to content

refactor(mosaic): split user profile account section into profile, email, phone - #10078

Merged
alexcarpenter merged 3 commits into
mainfrom
carp/mosaic-user-profile-accounts-section-breakup
Oct 9, 2026
Merged

alexcarpenter merged 3 commits into
mainfrom
carp/mosaic-user-profile-accounts-section-breakup

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Oct 5, 2026 •

Copy link
Copy Markdown
Member

Description

Stacked on #9937.

Splits the Mosaic UserProfile account section into three sections that match the Mosaic design: Profile (picture, name, and username), Email, and Phone. Each one has its own folder with its own model, view, wrapper, and feature test, built on the shared useUserProfileUserModel(). The email and phone row controllers become the email and phone section controllers. UserProfileProfilePanelView now takes only slots, in this order: profile, email, phone, connected accounts, enterprise accounts, Web3 wallets, danger.

No section view calls a controller. Each wrapper renders a child that takes the ready model, calls the controller, and spreads the result into a pure view. The name and username edit dialogs are passed into their views as an action slot, the same way the password section does it. Each section's view props and model types live in a .types.ts file.

Removed:

  • allowMultipleAccounts, along with the inline single-row layout it switched between.
  • onManageEmail and onManagePhone.
  • The email section's onAddEmail escape hatch, and onVerifyEmail/onVerifyPhone. Verifying always goes through the section's own verification dialog.

Code shared by the email and phone sections now sits flat in features/user-profile/, since it isn't a section: the contact list row and the contact types, utils, and messages.

Swingset:

  • Has a page for each of the three sections, and the profile panel story is rebuilt from slots.
  • Fixtures run the real section controllers. The dialog Nested and Standalone stories use the real add-email dialog in place of a hand-built one.
  • The live sandbox gets one route per section (/live/profile, /live/email, /live/phone) in place of /live/account-section.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Oct 5, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e25a2f8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 5, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Oct 9, 2026 6:17pm UTC
swingset Ready Ready Preview Oct 9, 2026 6:17pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 5, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository YAML (base), Organization UI (inherited)
  • Review profile: ASSERTIVE
  • Plan: Team
  • Run ID: 64027541-8042-45b8-9282-af535606e74a

📥 Commits

Reviewing files that changed from the base of the PR and between 1593d63 and e25a2f8.


📒 Files selected for processing (104)
  • .changeset/mosaic-user-profile-split-account-section.md
  • packages/mosaic/ARCHITECTURE.md
  • packages/mosaic/docs/controllers.md
  • packages/mosaic/docs/models.md
  • packages/mosaic/eslint-suppressions.json
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-contact.utils.test.ts
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-name-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
  • packages/mosaic/src/features/user-profile/__tests__/user-profile-username-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-contact-list-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-contact.messages.ts
  • packages/mosaic/src/features/user-profile/user-profile-contact.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-contact.utils.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-add-email.controller.test.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-add-email.dialog.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-email-actions.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-email-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.messages.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/__tests__/user-profile-enterprise-accounts-host.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-add-phone.controller.test.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-add-phone.dialog.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-phone-actions.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-phone-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-add-phone.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-add-phone.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-add-phone.messages.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-edit-name.controller.test.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-edit-name.dialog.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-edit-username.controller.test.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-edit-username.dialog.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-picture.controller.test.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/__tests__/user-profile-profile-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-name.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-name.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-username.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-username.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-name-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-picture-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-picture.controller.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-profile-section.messages.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-profile-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-profile-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-profile-section.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-profile-section.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-username-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-user.model.ts
  • packages/mosaic/src/features/user-profile/user-profile.types.ts
  • packages/mosaic/src/features/user-profile/user-profile.utils.ts
  • packages/mosaic/src/localization/registry.ts
  • packages/swingset/src/app/(clerk)/live/email/page.tsx
  • packages/swingset/src/app/(clerk)/live/phone/page.tsx
  • packages/swingset/src/app/(clerk)/live/profile/page.tsx
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/live-navigation.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/dialog.component.stories.tsx
  • packages/swingset/src/stories/fixtures/user-profile-add-email.ts
  • packages/swingset/src/stories/fixtures/user-profile-add-phone.ts
  • packages/swingset/src/stories/fixtures/user-profile-edit-name.ts
  • packages/swingset/src/stories/fixtures/user-profile-edit-password.tsx
  • packages/swingset/src/stories/fixtures/user-profile-edit-username.ts
  • packages/swingset/src/stories/fixtures/user-profile-emails.ts
  • packages/swingset/src/stories/fixtures/user-profile-phones.ts
  • packages/swingset/src/stories/fixtures/user-profile-profile.tsx
  • packages/swingset/src/stories/fixtures/user-profile.tsx
  • packages/swingset/src/stories/user-profile-account-section.mdx
  • packages/swingset/src/stories/user-profile-account-section.stories.tsx
  • packages/swingset/src/stories/user-profile-email-section.mdx
  • packages/swingset/src/stories/user-profile-email-section.stories.tsx
  • packages/swingset/src/stories/user-profile-password-section.stories.tsx
  • packages/swingset/src/stories/user-profile-phone-section.mdx
  • packages/swingset/src/stories/user-profile-phone-section.stories.tsx
  • packages/swingset/src/stories/user-profile-profile-panel.mdx
  • packages/swingset/src/stories/user-profile-profile-panel.stories.tsx
  • packages/swingset/src/stories/user-profile-profile-section.mdx
  • packages/swingset/src/stories/user-profile-profile-section.stories.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:


💤 Files with no reviewable changes (27)
  • packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/tests/user-profile-enterprise-accounts-host.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/tests/user-profile-picture-row.view.test.tsx
  • packages/mosaic/eslint-suppressions.json
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx
  • packages/mosaic/src/features/user-profile/tests/user-profile-name-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.controller.ts
  • packages/swingset/src/stories/user-profile-account-section.mdx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.controller.ts
  • packages/swingset/src/stories/user-profile-account-section.stories.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-add-phone.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-username.controller.ts
  • packages/swingset/src/stories/fixtures/user-profile-edit-username.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.messages.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx
  • packages/mosaic/src/features/user-profile/tests/user-profile-username-row.view.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-add-phone.messages.ts
  • packages/swingset/src/stories/fixtures/user-profile-edit-name.ts
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-name.controller.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.



📝 Walkthrough

Walkthrough

The combined user-profile account section is split into profile, email, and phone sections. Each section has its own model, controller, view, and supporting types. The profile panel now composes sections through slots. Tests, localization, live routes, fixtures, and stories are updated to reflect the separate sections.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~45 minutes


Merge Risk: ⚪ Minimal · up to e25a2

The section split has no identified issue requiring resolution before merge; complete normal checks before merging.

🚥 Pre-merge checks | ✅ 4 | ❓ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage Inconclusive Docstring coverage is 2.99% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 67 functions across 50 files. (27 skipped:… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: splitting the Mosaic user profile account section into profile, email, and phone sections.
Description check Passed The description accurately explains the section split, architectural changes, removed APIs, Swingset updates, routes, tests, and checklist status. It is directly related to the changeset.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 2.99% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 67 functions across 50 files. (27 skipped: 8 unsupported, 19 over the file limit.)



  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@alexcarpenter
alexcarpenter marked this pull request as draft October 5, 2026 20:41
@alexcarpenter
alexcarpenter force-pushed the carp/mosaic-user-profile-accounts-section-breakup branch from b753a84 to 982c0c1 Compare October 8, 2026 21:19
@github-actions github-actions Bot added the mosaic label Oct 8, 2026
@alexcarpenter alexcarpenter changed the title refactor(mosaic): split the user profile account section into profile, username, email, and phone sections refactor(mosaic): split user profile account section into profile, username, email, phone Oct 8, 2026
Base automatically changed from carp/mosaic-user-profile-email-link-sso to main October 9, 2026 15:29
@pkg-pr-new

pkg-pr-new Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10078

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10078

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10078

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10078

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10078

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10078

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10078

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10078

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10078

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10078

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10078

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10078

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10078

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10078

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10078

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10078

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10078

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10078

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10078

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10078

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10078

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10078

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10078

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10078

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10078

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10078

commit: e25a2f8

@alexcarpenter
alexcarpenter force-pushed the carp/mosaic-user-profile-accounts-section-breakup branch from 46f07a2 to 599c4aa Compare October 9, 2026 15:58
@alexcarpenter
alexcarpenter marked this pull request as ready for review October 9, 2026 15:58
@alexcarpenter alexcarpenter changed the title refactor(mosaic): split user profile account section into profile, username, email, phone refactor(mosaic): split user profile account section into profile, email, phone Oct 9, 2026
@alexcarpenter
alexcarpenter enabled auto-merge (squash) October 9, 2026 18:26
@alexcarpenter
alexcarpenter merged commit f9c1776 into main Oct 9, 2026
51 checks passed
@alexcarpenter
alexcarpenter deleted the carp/mosaic-user-profile-accounts-section-breakup branch October 9, 2026 18:31

This branch was successfully deployed

2 active deployments
Preview – swingset — e25a2f8e Deployed Oct 9, 2026 by vercel[bot]
Preview – clerk-js-sandbox — e25a2f8e Deployed Oct 9, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants